<template>
	<view class="sale_box" >
		<view class="sale_date1" v-if="saleList && saleList.length >3">
			<swiper :display-multiple-items="3" style="height: 152rpx;">
				<swiper-item class="swiper_item_class" v-for="(el,elindex) in saleList" :key='el.id'
					@click="saleChange(el,elindex)">
					<view class="date_li" :class="{'elOn':elindex == saleIndex}">
						<view class="date">{{el.date}}</view>
						<view class="month">{{el.month}}月</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="sale_date" v-else>
			<view class="date_li" :class="{'elOn':elindex == saleIndex}" v-for="(el,elindex) in saleList"
				:key='el.id' @click="saleChange(el,elindex)">
				<view class="date">{{el.date}}</view>
				<view class="month">{{el.month}}月</view>
			</view>
		</view>

		<block v-if="dataList && dataList.length > 0">
			<view class="sale_li" v-for="(vo,voindex) in dataList" :key="vo.id">
				<view class="sale_header">
					<image class="sale_yuan" src="/static/index/blue_yuan.png" mode="widthFix"></image>
					<view class="sale_line"></view>
				</view>
				<view class="sale_box">
					<view class="time">{{vo.startTime}}</view>
					<view class="sale_info" v-for="(e,eindex) in vo.cardList" :key="e.id"
						@click="jumpDetails(e)">
						<view class="info_img">
							<image class="imgBox" :src="e.cover" mode="aspectFill"></image>
						</view>
						<view class="info_word">
							<view class="info_word_left">
								<view class="word_name ellipseHide_two">{{e.cardName}}</view>
								<view class="identification_info">
									<image :src="e.merchantIcon" v-if="e.merchantIcon != ''"></image>
									<view class="ellipseHide">{{e.merchantName}}</view>
								</view>
							</view>
							<view class="quantity">
								<view class="quantity_left">
									<text class="left_01">限量</text>
									<text class="left_02">{{e.issueInventory}}份</text>
								</view>
								<view class="price">
									<text>￥</text>{{e.price}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="no_info">
				<image src="/static/index/commodity_no.png" mode="widthFix"></image>
				<text>暂无商品</text>
			</view>
		</block>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				saleList:[], //日历列表
				dataList:[], //数据列表
				saleIndex: 0,
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
			}
		},
		props: {

		},
		created() {
			this.getSaleCalendar()
		},
		mounted() {
			uni.$on('offeringCalendarFunc', () => {
				if (this.pageNum < Math.ceil(this.listTotal / this.pageSize)) {
						this.pageNum++; //每触底一次 page + 1;
						this.getSaleCalendarList()
				} 
			})
		},
		methods: {
			// 初始化参数
			initialization(){
				this.pageNum = 1
				this.listTotal = 0
				this.dataList = []
				this.getSaleCalendar()
			},
			// 
			async getSaleCalendar() {
				const res = await this.$api.getSaleCalendar();
				if(res.result && res.result.length > 0 ){
					this.saleList = res.result.map(res => {
						let obj = {}
						let date = res.split('-')
						// console.log(date)
						obj.date = date[2]
						obj.month = date[1]
						obj.year = date[0]
						obj.time = res
						return obj;
					})
					this.getSaleCalendarList()
				}
			},
			// 日历切换
			saleChange(item, index) {
				this.saleIndex = index
				this.initialization()
			},
			// 详情转跳
			jumpDetails(item) {
				// 公共转跳
				this.$emit('jumpDetails',item)
			},
			// 发售日历卡列表
			async getSaleCalendarList() {
			
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum
					// startTime: this.saleList[this.saleIndex].time
				}
				if(this.saleList.length > 0 ){
					data.startTime = this.saleList[this.saleIndex].time
				}
				const res = await this.$api.getSaleCalendarList(data);
				this.listTotal = res.result.total
				var elData = res.result.records
				var resultData = this.groupingData(JSON.parse(JSON.stringify(elData)),'startTime')
				
				if (this.pageNum > 1) {
			
					if( this.dataList.length > 0 && (this.dataList[this.dataList.length-1].startTime == resultData[0].startTime) ){
						console.log(resultData[0].cardList)
						this.dataList[this.dataList.length-1].cardList = this.dataList[this.dataList.length-1].cardList.concat(resultData[0].cardList)
						resultData.shift();
					}
					if(resultData.length > 0){
						this.dataList = this.dataList.concat(JSON.parse(JSON.stringify(resultData))); //将数据拼接在一起
					}
					
				} else {
					this.dataList = resultData
				}
			},
			/**
			 * [groupingData 根据共同字段将数据分组]
			 * @param {[type]} arr [数据源]
			 * @param {[type]} field [字段名]
			 */
			 // 传入两个参数 一个是待分组的数据 一个是按照哪个字段进行分组
			 groupingData(data, filed){
			     // map用来保存存过的字段 为下边添加新对象或者将相同字段的数据保存到同一个list中
			     let map = {};
			     // dest主要保存分组后的数据
			     let dest = [];
			     // 循环遍历传入的data
			     data.forEach(item => {
			 // 判断map对象中是否有遍历时data的key 如果没有则向dest数组中推入一个新的对象(包含两个属性，一个要分组的字段名，一个保存相同字段名数据的数组)
			         if(!map[item[filed]]) {
			             dest.push({
			                 [filed]: item[filed],
			                 cardList: [item]
			             });
			             // 进行一次新添对象的记录
			             map[item[filed]] = item;
			             // 如果在map中有data遍历的key(字段相同) 则向dest数组里面的相同字段的list下推入数据
			         } else {
			             dest.forEach(dItem => {
			               if (dItem[filed] == item[filed]) {
			                 dItem.cardList.push(item);
			               }
			             });
			         }
			     })
			     return dest;
			 },
		}
	}
</script>

<style scoped>
	.no_info {
		padding-top: 188rpx;
	}
/* 发售日历 */
	.sale_box .sale_date {
		width: 100%;
		padding: 0 96rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-bottom: 60rpx;
	}

	.sale_box .sale_date1 {
		width: 100%;
		padding: 0 96rpx;
		box-sizing: border-box;
		margin-bottom: 60rpx;
	}

	.swiper_item_class {
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.sale_date1 .date_li,
	.sale_date .date_li {
		width: 132rpx;
		height: 152rpx;
		background: #F5F5F5;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: #555555;
	}

	.sale_date .date_li {
		margin-right: 80rpx;
	}

	.sale_date .date_li:last-child {
		margin-right: unset;
	}

	.date_li .date {
		font-weight: 700;
		font-size: 60rpx;
	}

	.date_li .month {
		font-weight: 400;
		font-size: 36rpx;

	}

	.sale_date1 .elOn,
	.sale_date .elOn {
		color: #fff;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		box-shadow: 0px 24rpx 44rpx #E4E7FF;
	}

	/* 列表 */
	.sale_li {
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		margin-bottom: 6rpx;
	}

	.sale_li:last-child .sale_header .sale_line {
		background: #fff;
	}

	.sale_header {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.sale_header .sale_yuan {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		margin-bottom: 6rpx;
	}

	.sale_header .sale_line {
		width: 1px;
		height: 100%;
		background: #B8C7FF;
	}

	.sale_li .sale_box {
		width: 100%;
		margin-left: 20rpx;
	}

	.sale_box .time {
		font-weight: 500;
		font-size: 36rpx;
		color: #222222;
		margin-top: -16rpx;
	}

	.sale_li .sale_info {
		margin: 24rpx 0 40rpx 0;
		padding: 24rpx;
		box-sizing: border-box;
		width: 668rpx;
		min-height: 230rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		background: url('@/static/index/index_bj01.png') no-repeat;
		background-size: 100% 100%;
		box-shadow: 0px 0px 20rpx #EDEDED;
	}

	.sale_info {
		display: flex;
		flex-direction: row;
	}

	.sale_info .info_img {
		width: 182rpx;
		height: 182rpx;
		border-radius: 24rpx;
		margin-right: 26rpx;
	}

	.info_img image {
		border-radius: 24rpx;
	}

	.info_word {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 390rpx;
	}

	.info_word .word_name {
		font-size: 32rpx;
		color: #222222;
		margin-bottom: 12rpx;
	}

	.info_word .identification_info {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: #222222;
		font-size: 26rpx;
		background: #FFFFFF;

	}

	.identification_info .ellipseHide {
		width: 320rpx;
	}

	.identification_info image {
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.info_word .quantity {
		margin-bottom: unset;
	}

	.info_word .quantity .price {
		font-weight: 700;
		line-height: 42rpx;
		color: #222222;
		font-size: 38rpx;
	}

	.info_word .quantity .price text {
		font-weight: 400;
		font-size: 28rpx;
		line-height: 36rpx;
	}
	
	.quantity {
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}
	
	.quantity_left text {
		padding: 0 14rpx;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 30rpx;
	}
	
	.quantity_left .left_01 {
		color: #926300;
		background: #FBE6BA;
		border-radius: 4rpx 0 0 4rpx;
	}
	
	.quantity_left .left_02 {
		color: #BC8000;
		background: #FFF9EB;
		border-radius: 0px 4rpx 4rpx 0px;
	}


</style>
